import React from "react";

export interface FlowNode {
  nodeId: string;
  nodeLabel: string;
  status: string;
  event: string;
  data?: any;
  timestamp?: number;
}

interface ChainNodesProps {
  nodes: FlowNode[];
}

const ChainNodes: React.FC<ChainNodesProps> = ({ nodes }) => {
  const [expanded, setExpanded] = React.useState(true);

  if (nodes.length === 0) {
    return null;
  }

  return (
    <div
      style={{
        background: "#f8f9fa",
        padding: 12,
        borderRadius: 6,
        marginBottom: 8,
        border: "1px solid #e6f4ff",
      }}
    >
      <div
        style={{
          display: "flex",
          alignItems: "center",
          cursor: "pointer",
          marginBottom: expanded ? 8 : 0,
        }}
        onClick={() => setExpanded((e) => !e)}
      >
        <span
          style={{
            fontWeight: 600,
            color: "#1890ff",
            fontSize: 14,
          }}
        >
          💭 思维链 ({nodes.length} 步)
        </span>
        <span
          style={{
            marginLeft: 8,
            color: "#888",
            fontSize: 12,
          }}
        >
          {expanded ? "收起 ▲" : "展开 ▼"}
        </span>
      </div>

      {expanded && (
        <div style={{ position: "relative" }}>
          {/* 连接线 */}
          {nodes.length > 1 && (
            <div
              style={{
                position: "absolute",
                left: 12,
                top: 20,
                bottom: 20,
                width: 2,
                background: "linear-gradient(to bottom, #1890ff, #52c41a)",
                borderRadius: 1,
                opacity: 0.3,
              }}
            />
          )}

          {nodes.map((node, index) => (
            <div
              key={`${node.nodeId}_${index}`}
              style={{
                display: "flex",
                alignItems: "center",
                marginBottom: index < nodes.length - 1 ? 12 : 0,
                position: "relative",
                paddingLeft: 28,
              }}
            >
              {/* 节点圆点 */}
              <div
                style={{
                  position: "absolute",
                  left: 3,
                  width: 18,
                  height: 18,
                  borderRadius: "50%",
                  background:
                    index === nodes.length - 1 ? "#52c41a" : "#1890ff",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  fontSize: 10,
                  color: "white",
                  fontWeight: "bold",
                  zIndex: 1,
                }}
              >
                {index + 1}
              </div>

              {/* 节点标签 */}
              <div
                style={{
                  background: "white",
                  padding: "8px 12px",
                  borderRadius: 4,
                  border: "1px solid #d9d9d9",
                  fontSize: 13,
                  color: "#262626",
                  fontWeight: 500,
                  boxShadow: "0 1px 2px rgba(0,0,0,0.03)",
                  flex: 1,
                  position: "relative",
                }}
              >
                {node.nodeLabel}

                {/* 状态指示器 */}
                <span
                  style={{
                    marginLeft: 8,
                    padding: "2px 6px",
                    borderRadius: 3,
                    fontSize: 11,
                    fontWeight: 400,
                    background:
                      node.status === "FINISHED" ? "#f6ffed" : "#fff7e6",
                    color: node.status === "FINISHED" ? "#52c41a" : "#fa8c16",
                    border: `1px solid ${node.status === "FINISHED" ? "#b7eb8f" : "#ffd591"}`,
                  }}
                >
                  {node.status === "FINISHED" ? "✓" : "⏳"}
                </span>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default ChainNodes;
